﻿@model FeedbackViewModel

<div class="viewSubmitted">
    <div class="tableCont">
        <table>
            @if(Model.Feedbacks.Count > 0){
                <tr>
                    <th class="time">时间</th>
                    <th class="title">标题</th>
                </tr>
                @foreach (var f in Model.Feedbacks)
                {
                    <tr onclick="show(@(f.Id))">
                        <td>
                            @f.Created.ToString("yyyy-MM-dd HH:mm")
                        </td>
                        <td id="title_@(f.Id)">
                            @f.Title
                        </td>
                        <td id="content_@(f.Id)" style="display:none">
                            @(f.Content ?? "无内容")
                        </td>
                    </tr>
                }
            }
            else
            {
                <tr><td>暂无任何反馈</td></tr>
            }
        </table>
    </div>
    <div class="pageControl">
        <a class="okButton" asp-action="ViewSubmitted" asp-route-pageIdx="@(Model.PageIdx-1)">上一页</a>
        <div>第@(Model.PageIdx)页</div>
        <a class="okButton" asp-action="ViewSubmitted" asp-route-pageIdx="@(Model.PageIdx+1)">下一页</a>
    </div>
</div>

<div class="float" id="float">
    <div>
        <div id="floatTitle"></div>
        <div id="floatContent"></div>
    </div>
    <div class="okButton" onclick="closeShow()">关闭</div>
</div>

<script>
    function show(id){
        const contentId = 'content_' + id;
        const content = document.getElementById(contentId).innerText;
        const titleId = 'title_' + id;
        const title = document.getElementById(titleId).innerText;
        const float = document.getElementById('float');
        const floatTitle = document.getElementById('floatTitle')
        const floatContent = document.getElementById('floatContent')
        floatContent.innerText = content;
        floatTitle.innerText = title;
        float.classList.toggle("floatShow",true)
    }
    function closeShow(){
        console.log("close")
        const float = document.getElementById('float');
        float.classList.toggle("floatShow", false)
    }
</script>

<style>
    .viewSubmitted{
        width: 100vw;
        height: 100vh;
        padding: 30px 0px 30px 0px;
        box-sizing: border-box;
        display:flex;
        justify-content:space-between;
        gap: 10px;
        align-items: center;
        flex-direction: column;
    }

    .tableCont{
        overflow:auto;
        width: 90vw;
        height: 80vh;
    }
    table{
        border-collapse: separate
    }
    td{
        background-color: #eee;
        word-break: break-all;
        line-break: anywhere;
        min-width: 150px;
        max-width: 500px;
        transition: 0.5s;
        cursor:pointer;
    }
    tr:hover td{
        background-color: #ccc;
    }
    .pageControl{
        display:flex;
        justify-content:space-around;
        align-items:center;
        gap: 20px;
    }
    .input{
        width:60px;
    }
</style>

<style>
    .float{
        position:fixed;
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px;
        border-radius: 10px;
        background-color: white;
        box-shadow: 0 0 5px 0px black;
        display:none;
        flex-direction:column;
        gap:10px;
        justify-content:space-between;
        overflow:auto;
        align-items:center;
        text-align:center;
        padding: 20px
    }
    .floatShow{
        display:flex;
    }
    #floatTitle{
        font-size: 22px;
        color: #666;
    }
</style>